class Dep {
    constructor() {
      this.subscribers = new Set();
    }
    depend() {
      if (activeWatcher) {
        this.subscribers.add(activeWatcher);
      }
    }
    notify() {
      this.subscribers.forEach(watcher => watcher.update());
    }
  }
  
  let activeWatcher = null;
  
  class Watcher {
    constructor(updateFn) {
      this.updateFn = updateFn;
      this.update();
    }
    update() {
      activeWatcher = this;
      this.updateFn();
      activeWatcher = null;
    }
  }
  
  function defineReactive(obj, key) {
    let value = obj[key];
    const dep = new Dep();
  
    Object.defineProperty(obj, key, {
      get() {
        dep.depend(); // 收集依赖
        return value;
      },
      set(newValue) {
        if (newValue !== value) {
          value = newValue;
          dep.notify(); // 通知更新
        }
      },
    });
  }
  
  const vm = {
    data: {
      firstName: 'John',
      lastName: 'Doe',
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      },
    },
  };
  
  // 将 data 转换为响应式
  Object.keys(vm.data).forEach(key => defineReactive(vm.data, key));
  
  // 创建计算属性 watcher
  new Watcher(() => {
    console.log('fullName updated:', vm.data.firstName + ' ' + vm.data.lastName);
  });
  
  // 测试
  vm.data.firstName = 'Jane'; // 输出: fullName updated: Jane Doe